<template>
  <div>
    <div class="header">
      <div class="header-left">
        <div class="header-arrow">
          <span></span>
        </div>
        <div class="header-content">合同审批</div>
      </div>
      <div>
        <el-button type="primary">发布</el-button>
      </div>
    </div>

    <!-- 缩放按钮 -->
    <div class="flex">
      <el-button :icon="Minus" size="small" @click="onCutZoom"></el-button>
      <span>{{ zoomData }}%</span>
      <el-button :icon="Plus" size="small" @click="onAddZoom"></el-button>
    </div>

    <div class="box-scale" :style="`transform: scale(${ zoomData / 100});`">
      <!-- 发起人 initiator -->
      <div class="Reviewer">
        <div class="Reviewer-top" style="background-color: #576a95;">
          <span>发起人123</span>
        </div>
        <div class="Reviewer-bottom">
          <div>所有人</div>
          <span></span>
        </div>
        <div class="addRound">
          <div class="content"></div>
          <div class="addRoundIcon">
            <div class="arrow"></div>
          </div>
          <AddPopver :nodeData="nodeData" @setNodeData="setNodeData"></AddPopver>
        </div>
      </div>
      <AddNode :nodeData="nodeData" @setNodeData="setNodeData"></AddNode>
      <div>流程结束</div>
    </div>
  </div>

</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {Minus, Plus} from '@element-plus/icons-vue';
import axios from "@/api/index.js";
import AddNode from "@/components/addNode.vue";
import AddPopver from "@/components/addPopver.vue";

const zoomData = ref(100); // 控制缩放大小
const nodeData = reactive([]); // 审核人--抄送人--条件 数据
const getData = async () => {
  // const data = await axios.get("/data/list");
}

// 修改审核人 抄送人 条件方法
const setNodeData = (data) => {
  nodeData.push(data);
  console.log("nodeData", nodeData);
}

// 控制最大倍率
const onAddZoom = () => {
  if (zoomData.value >= 300) return;
  zoomData.value += 10;
}

// 控制最小倍率
const onCutZoom = () => {
  if (zoomData.value <= 50) return;
  zoomData.value -= 10;
}
onMounted(() => {
  getData();
})
</script>
<style scoped>

</style>